/* hook组件 useRef / useImperativeHandle */
import React, {useEffect, useImperativeHandle, useRef, useState} from 'react'
import {Button} from "antd";

/*
* 1.  基于 forWardRef 实现ref转发，目的：获取总组件内部的某个元素
*
* */

/*
* 如何实现：基于 forwardRef 实现ref转发的同时，获取函数子组件内部的状态或方法
* => useImperativeHandle
* */

// 函数
const Child = React.forwardRef((props, ref) => {
    let [text, setText] = useState('你好世界')
    const submit = () =>{
        setText(text + 1)
    }
    useImperativeHandle(ref,()=>{
        // 在这返回的内容，都可以被父组件的 ref获得
        return {
            text,submit
        }
    })

    console.log(props, 111)
    console.log(ref);// 在demo中，调用Child时，传递的ref对象
    return <div className="child-box">
        <span ref={ref}>{text}</span>
    </div>
})

// const Child = function(){
//     return <div className="child-box">
//         <span>哈哈哈</span>
//     </div>
// }


const Demo = function () {
    let x = useRef(null)
    useEffect(() => {
        console.log(x.current)
        let {text,submit} = x.current
        submit()
    }, [])
    const handler =()=>{
        let {text,submit} = x.current
        submit()
    }
    return <div className="demo">
        <Child ref={x} a={1}/>
        <Button onClick={handler}>点击</Button>
    </div>
}

export default Demo